<template>
	<view>
		<div class="my-balance">
			<div class="flex_xy balance">
				<div>
					<div style="text-align: center">账户余额</div>
					<div style="font-size: 26px;text-align: center">{{balance}}元</div>
				</div>
			</div>
			<div class="content-block">

				<div class="balance_btn" @tap="gorecharge">
					<button class="button button-fill button-big">充值</button>
				</div>
				<!-- <div class="balance_btn">
		                 <a href="{:url('portal/my/my_extract_cash',['type'=>1])}">
		                     <button class="button button-dark button-big">提现</button></a>
		             </div> -->
			</div>
			<div class="flex_xy balance_spe">
				<div>
					<!--<a href="{:url('portal/my/my_balance_detail')}">-->
					<div>余额明细</div>
					<!--</a>-->
				</div>
			</div>

			<view class="empty-box" v-if="list.length === 0 && status === 'nomore'">
				<u-empty mode="search" :text="`没有相关信息`" />
			</view>
			<view class="content" v-else>
				<!-- <view class="list" v-if="type == 'article'"><articleItem v-for="item in list" :key="item.id" :item="item" /></view> -->
				<div id="notice-list">
					<div id="notice-list" v-for="item in list">
						<div class="detail">
			 			<div class="displayFlex">
								<div class="flex" style="text-align: left;">{{item.explain_text}}</div>
								<div class="" style="width: 30%; text-align: right;">{{item.change_date}}</div>
							</div>
							<div class="displayFlex user_money">
								<div class="flex" style="text-align: left;">账户余额:{{item.user_money}}元</div>
								<div class="flex" style="text-align: right;font-weight:bold;">
									<span v-if="item.change_type==0">+</span>
									<span v-else>-</span>
									{{item.money}}元
								</div>
							</div>
						</div>

					</div>
				</div>
			 <u-loadmore v-if="keyword" :status="status" bg-color="#f8f8f8" margin-top="50" margin-bottom="50"
					@loadmore="loadMore" />
				<u-back-top :scroll-top="scrollTop" />
			</view>
			
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				list: [],
				keyword: '',
				status: 'nomore',
				scrollTop: 0,
				balance:0
			};
		},
		onLoad(options) {
			this.getData();
		},
		onReachBottom() {
		  this.loadMore();
		},
		onPageScroll(e) {
		  this.scrollTop = e.scrollTop;
		},
		methods: {
			gorecharge() {
				uni.redirectTo({
					url: '/pages/my/my_balance_recharge'
				})
			},
			getData() {
				this.$api.get({
					url: 'portal/my/balance_list',
					data: {
						page: `${this.page},10`, // 一页显示10条
					},
					success: res => {
						// this.post_data = res.data;
						if (res.code == 1) {
							let list = res.data;
							this.balance = res.balance
							this.list = this.list.concat(list);
							// 分页判断
							if (list.length < 10) {
								this.status = 'nomore';
							} else {
								this.status = 'loadmore';
								this.page++;
							}
						}
					}
				});
			},
			loadMore() {
			  if (this.status === 'loadmore') {
			    this.getData();
			  }
			}
		}
	};
</script>


<style>
	html,
	body {
		height: 100%;
		background: #ffff;
		font-size: 14px;
	}

	.my-balance {
		height: 100%;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		display: -webkit-flex
	}

	.mescroll {
		-webkit-box-flex: 1;
		-ms-flex: 1;
		flex: 1
	}

	.displayFlex {
		display: flex;
	}

	.flex {
		flex: 1;
		text-align: center;
	}

	.flex_xy {
		display: flex;
		align-items: center;
		/*垂直居中*/
		justify-content: center;
		/*水平居中*/
	}

	.balance {
		height: 100px;
	}

	.balance_spe {
		height: 50px;
		background-color: #f5f5f5;
		justify-content: left;
		padding: 0 10px;
	}

	.balance_btn button {
		height: 40px;
		line-height: 40px;
		margin: 10px;
		width: 100%;
	}

	.content-block {
		margin: 0;
	}

	.balance_btn {
		width: calc(100% - 20px);
	}

	.detail {
		padding: 10px;
		background: #fff;
		border-bottom: 1px solid #eee;
	}

	.detail:last-child {
		border-bottom: none;
	}

	a:link {
		text-decoration: none;
	}

	a:visited {
		text-decoration: none;
	}

	a:hover {
		text-decoration: none;
	}

	a:active {
		text-decoration: none;
	}
	.button.button-fill {
		background: #DF2E26;
		color:#fff
	}
</style>
